<!--
  ~ Copyright (c) Jack魏 2024 - 2024, All Rights Reserved.
  -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="Layui登录,yiyi-web登录页面,后台管理系统,权限系统">
  <link rel="icon" th:href="@{/images/yiyi.ico}" type="image/x-icon">
  <meta name="description" content="用户管理">
  <meta name="author" content="Jack魏">
  <title>用户管理</title>
  <!-- layui -->
  <link type="text/css" rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
  <script type="text/javascript" th:src="@{/layui/layui.js}" charset="utf-8"></script>
  <!-- jQuery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- config 常用配置 -->
  <script type="text/javascript" th:src="@{/js/config.js}"></script>
  <!-- 常用工具类 -->
  <script type="text/javascript" th:src="@{/js/MyUtils.js}"></script>
  <!-- CSS -->
  <link type="text/css" rel="stylesheet" th:href="@{/css/index.css}" media="all"/>
</head>
<body>
<div class="table-container">
  <!--  查询条件-->
  <form class="layui-form layui-row layui-col-space16">
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="account" value="" placeholder="账号" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <input type="text" name="userName" placeholder="昵称" lay-affix="clear" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <input type="text" name="phone" placeholder="手机/邮箱" lay-affix="clear" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md1">
      <div class="layui-input-wrap">
        <select name="sex">
          <option value="">性别</option>
          <option value="0">女</option>
          <option value="1">男</option>
        </select>
      </div>
    </div>
    <div class="layui-col-md1">
      <div class="layui-input-wrap">
        <select name="status">
          <option value="">状态</option>
          <option value="0">正常</option>
          <option value="1">禁用</option>
        </select>
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <input type="text" name="notes" placeholder="备注" lay-affix="clear" class="layui-input">
      </div>
    </div>
    <div class="layui-btn-container layui-col-md2">
      <button class="layui-btn" lay-submit lay-filter="user-table-search">查询</button>
      <button type="reset" class="layui-btn layui-btn-primary">清空条件</button>
      <button class="layui-btn" lay-submit lay-filter="user-table-add">新增</button>
    </div>
  </form>
  <!--  表格渲染-->
  <table class="layui-hide" id="user-table-data"></table>
  <!--  表格扩展工具-->
  <script type="text/html" id="toolbarUser">
    <div class="layui-btn-container"/>
  </script>
</div>
<script type="text/html" id="userBar">
  <div class="layui-clear-space">
    <button type="button" class="layui-btn layui-btn-xs" lay-event="edit">
      <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button type="button" class="layui-btn layui-bg-red layui-btn-xs" lay-event="del">
      <i class="layui-icon layui-icon-delete"></i>
    </button>
  </div>
</script>

<script th:inline="javascript">
  layui.use(['table', 'laypage'], function () {
    var table = layui.table;
    var form = layui.form;
    // 初始化数据
    renderTable();

    /**
     * 刷新表格数据
     * @param 查询参数
     */
    function renderTable() {
      table.render({
        elem: '#user-table-data', // 注意这里带#
        url: 'pageUser', // 请求URL
        toolbar: '#toolbarUser',
        defaultToolbar: ['filter', 'exports', 'print'],
        cols: [
          [ //标题栏
            {field: 'account', title: '账号', width: 150, sort: true},
            {field: 'userName', title: '昵称', width: 150},
            {field: 'phone', title: '手机号', width: 150},
            {field: 'email', title: '邮箱', width: 150},
            {
              field: 'sex', title: '性别', width: 80, templet: function (item) {
                if (item.sex === 1) {
                  return '<span style="color: blue; font-size: large; font-weight: bold">♂</span>';
                } else {
                  return '<span style="color: pink; font-size: large; font-weight: bold"">♀</span>';
                }
              }
            },
            {
              field: 'status', title: '状态', width: 90, templet: function (item) {
                if (item.status === 0) {
                  return '<input type="checkbox" name="status" value=' + item.id
                    + ' title="正常|禁用" lay-skin="switch" lay-filter="user-status" checked />';
                } else {
                  return '<input type="checkbox" name="status" value=' + item.id
                    + ' title="正常|禁用" lay-skin="switch" lay-filter="user-status" />';
                }
              }
            },
            {field: 'notes', title: '备注'},
            {field: 'updateTime', title: '更新时间', width: 200, sort: true},
            {field: 'createTime', title: '创建时间', width: 200, sort: true},
            {fixed: 'right', title: '操作', width: 60, minWidth: 88, toolbar: '#userBar'},
          ]
        ],
        // where: params, // 加了这个，就会重写下面的request了。
        request: {
          pageName: 'current',//自定义后台接收参数的名字（页码）
          limitName: 'size' //自定义后台接收参数的名字（每页条数）
        },
        parseData: function (res) {
          console.log(res.data.records)
          return {
            "code": res.code == 200 ? 0 : 1, // 接口状态，只有为0才会渲染数据【巨坑】！！！
            "msg": res.message, // 接口信息
            "count": res.data.total, // 总条数
            "data": res.data ? res.data.records : []// 列表数据
          };
        },
        page: { //分页配置，支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem）
          layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
          first: "首页",
          last: "末页",
          curr: 1, //当前页，第一次进入默认到第1页
          groups: 3, //当有多个页时，页面上展示页码个数
          limit: 10,
          limits: [10, 20, 50],
        }
      });
    }

    // 触发单元格工具事件
    table.on('tool(user-table-data)', function (obj) { // 双击 toolDouble
      var record = obj.data; // 获得当前行数据
      console.log(record)
      if (obj.event === 'edit') {
        // 打开编辑窗口
        layer.open({
          title: '用户信息编辑',
          type: 2,
          area: ['50%', '80%'],
          content: `userInfo?userId=${record.id}`
        });
      } else if (obj.event === 'del') {
        console.log("删除用户")
        layer.confirm(`确认删除吗？删除后将不可恢复！</br>删除账号为：${record.account}`, {
          icon: 2,
          title: "删除确认"
        }, function (index) {
          let result = MyAjax(POST, {id: record.id, isDel: 1}, 'updateUserById', {
            async: false,
            result: true,
            msg: false
          })
          console.log(result)
          if (isOk(result)) {
            console.log("操作成功，刷新数据");
            renderTable();
          }
          // 关闭窗口
          layer.close(index)
        })
      }
    });

    // 状态 - 开关操作
    form.on('switch(user-status)', function (obj) {
      var id = this.value;
      MyAjax(POST, {id: id, status: obj.elem.checked ? 0 : 1}, 'updateUserById')
    });

    // 查询提交
    form.on('submit(user-table-search)', function (data) {
      var params = data.field; // 获取表单字段值
      console.log(params)
      // 搜索重载表格数据
      table.reload('user-table-data', { // 注意这里不带#
        url: "pageUser",
        method: "GET",
        page: {
          curr: 1    // 重新以第一页开始渲染
        },
        where: params // 携带查询条件
      });
      return false; // 阻止默认 form 跳转
    });

    // 新增用户
    form.on('submit(user-table-add)', function () {
      console.log('新增用户')
      // 打开编辑窗口
      layer.open({
        title: '新增用户',
        type: 2,
        area: ['50%', '80%'],
        content: `userInfo`
      });
      return false; // 阻止默认 form 跳转
    });
  });
</script>
</body>
</html>